<template>
    <div :class="{marginTop10: prop.marginFlag=='true'}">
        <div class="hotTitle" :class="{hotTitleIsShow:prop.isShowFlag=='true'}">{{prop.title}}</div>
        <div class="qk-goods">
            <productItem  :productdata="goodslist" :flex="prop.flex"></productItem>
        </div>
    </div>
</template>

<script>
	import productItem from "./product/productItem.vue";
    import {
        getSellerList
    } from "@/api/base/goods/seller/goods";
	export default {
	    name: "qkStoreHotGoods",
      props:{
	      prop: {
		      type: Object,
		      default(){
			      return {
				      flex:'1',
				      marginFlag:'true',
                      title:"热门商品",
                      isShowFlag:'true',
                      page:{
                          pageSize:20,
                          currentPage: 1,
                      }
			      }
		      }
	      }
      },
        watch:{
	        prop:{
	            handler(e){
	                this.init(e.page)
                },
                deep:true
            }
        },
      components:{
	      productItem
      },
        data() {
            return {
                goodslist:[],
            }
        },
        methods:{
            //获取店家设置的商品数据
            init(page,params = {}){
                params.goodsStatus=0
                params.storeRecommend=1
                getSellerList(page.currentPage,page.pageSize,params).then(res=>{
                    if(res.data.code==200){
                        this.goodslist=res.data.data
                    }
                })
            },
        },
        created() {
            this.init(this.prop.page)
        },
	}
</script>
<style lang="scss" scoped>
.hotTitle{
   font-weight: 400;
    font-size:16px;
    line-height: 30px;
    border-left:5px solid #fa436a;
    padding-left: 10px;
    margin-bottom: 10px;
    display: none;
}
.hotTitleIsShow{
    display: block;
}
.marginTop10{
    margin-top: 10px;
}
</style>